473,468 Members | 1,882 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Dropdown as div contents

Fary4u
273 Contributor
using standard dropdown box make as div contents & after click on the link to passing value & changing the color ?

for example
div color & size

http://www.misssixty.com/item/store/...M/areaid//sts/
Jul 22 '10 #1

✓ answered by acoder

You can convert the drop down values to the divs using JavaScript, so that if JavaScript is not enabled the user can still select their options.

Take the select element and its options and write a div which is styled appropriately for each option, so the first list would be converted to 4 divs with the values/colours of Black, Red, White and Green.

7 2734
acoder
16,027 Recognized Expert Moderator MVP
The problem isn't quite clear. Could you explain with a bit of code please.
Jul 23 '10 #2
Fary4u
273 Contributor
@acoder
how do i change div, href or radio box instead of drop down lists

if i need to convert dropdown values into div or radio box & passing value to the next page whats the best available fancy methods ?

following link having the same option
http://www.misssixty.com/item/store/...J/areaid//sts/

available color & size are shown as div list & passing value & swaping the image.
Expand|Select|Wrap|Line Numbers
  1. <select name="cbo" class="styled"> 
  2.   <option value="1">Option 1</option> 
  3.   <option value="2">Option 2</option> 
  4.   <option value="3">Option 3</option> 
  5. </select> 
  6.  
Jul 24 '10 #3
acoder
16,027 Recognized Expert Moderator MVP
OK, you can use divs or other elements instead of form elements and attach an onclick event handler which deals with the setting and passing of values.

For example, you could set a hidden field if a particular div is clicked, or you could change the href of a link.

What exactly do you want to do?
Jul 24 '10 #4
Fary4u
273 Contributor
@acoder
thxs for reply, i'm trying to bring 2 type of list i've already got the list in dropdown.

1st list:
colors : Black | White | Red | Green

2nd list:
sizes : Small | Medium | Large | Xtra Large

& some body click on the Black Color it's show's Black Image & bring the 2nd list

or if some body click on Red color it's show's Red Image & bring the 2nd list

Image should be JQuery Zoom effect just like the following link.
http://www.misssixty.com/item/store/...J/areaid//sts/
Jul 24 '10 #5
acoder
16,027 Recognized Expert Moderator MVP
You can convert the drop down values to the divs using JavaScript, so that if JavaScript is not enabled the user can still select their options.

Take the select element and its options and write a div which is styled appropriately for each option, so the first list would be converted to 4 divs with the values/colours of Black, Red, White and Green.
Jul 27 '10 #6
Fary4u
273 Contributor
@acoder
any example ? here is my example ?
when you select the 1st dropdown using request query string taking value & pass it to 2nd dropdown.
strprodcolor = Request.QueryString("drpcolor")

Expand|Select|Wrap|Line Numbers
  1.  
  2. <SCRIPT language=JavaScript>
  3.     function reload(form){
  4.     var int1 = "<%= intProdID %>"
  5.     var int2 = "<%= intProdN %>"
  6.     var val=form1.drpcolor.options[form1.drpcolor.options.selectedIndex].value;
  7.     self.location='product_detail.asp?intProdID=' + int1 + '&intProdN=' + int2 + '&drpcolor=' + val ;
  8.     }
  9. </script>
  10. <select id="cboColours" name="drpcolor" onchange="reload(this.form)">
  11.     <option selected value="1">Make Selection</option>
  12.     <option selected value="1"><%= strprodcolor %></option>
  13.     <%=PopulateCombo(rsColours,"color_id","color_id")%>
  14. </select>
  15. <br>
  16. <select id="cboSizes" name="drpsize">
  17. <option selected value="1">Make Selection</option>
  18. <%=PopulateCombo(rsSizes,"size","stock")%>
  19. </select>
  20.  
  21.  
Jul 27 '10 #7
acoder
16,027 Recognized Expert Moderator MVP
There's no need to reload the page. You can do this without a page reload by loading the sizes on page load, e.g. something like:
Expand|Select|Wrap|Line Numbers
  1. var colsizes = {"Black":["Small","Medium","Large"],
  2. }
Jul 27 '10 #8

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: Joseph Barron | last post by:
Here is a SIMPLE problem that I'm trying to solve. It works in Netscape 6.2, but IE6 gives ""No such interface supported." Below are page1.htm and page2.htm . In page1.htm, there are two...
5
by: sifar | last post by:
Hi, This is my first post to this Group. A] I am trying to create a escalation page which will mail an escalation report of a faulty product. Items needed on Page: -----------------------
4
by: Invalidlastname | last post by:
Hi, I have an XML document, created from ADO DataSet, which contains XML data in some nodes shown below: <NewDataSet> <Table> <field_name>My Selection</field_name>...
3
by: Jon | last post by:
I am using cascading dropdowns, where the selection in one determines what fills another. In regular ASP I simply loaded a giant dataset into javascript array and when you clicked on one dropdown,...
2
by: Mike P | last post by:
I am populating a drop down column in a datagrid on page load. Here is my code : <asp:TemplateColumn> <ItemTemplate> <asp:DropDownList ID="ddlUserName" Font-Name="Verdana" Font-Size="8pt"...
2
by: Mike Collins | last post by:
I cannot get the correct drop down list value from a drop down I have on my web form. I get the initial value that was loaded in the list. It was asked by someone else what the autopostback was...
1
by: Oleg | last post by:
Hi, I'm having a problem with page caching and therefore reusing dropdown box contents. Scenerio: user1 has security to see list of three items(.aspx populates it with three items only) in...
2
by: Peter | last post by:
ASP.NET 2003 In the DataGrid how do I select current cell value in the dropdown box when I click on the edit link, currently when I click on the edit link in the DataGrid the dropdown box...
0
by: gwhite1 | last post by:
OK, this seemed like a simple application a week ago. I have loaded a gridview from a sqlserver DB and have a template column with a dropdown field. I want the user to be able to dropdown the field...
13
by: Shutey | last post by:
I have a strange issue with dropdowns. Using php4, mySQL5, Apache 2 on a fast XP pro PC, I have a form which requires 5 dropdowns populated with indentical values. I extract the values using SQL...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
1
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.